<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        .container {
            width: 300px;
            height: 180px;
            padding: 100px 0 0 100px;
            position: absolute;
            white-space:nowrap;
            font-size: 0px;
        }
        .artwork {
            position: absolute;
            font-size: 0px;
        }
        .artwork img {
            width: 300px;
            height: 180px;
        }
        .mirror {
            width: 100px;
            height: 100px;
            position: absolute;
            opacity: 0.5;
            background-color: yellow;
            display: none;
        }
        .magnify {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 500px;
            overflow: hidden;
            display: none;
        }
        .imgs {
            width: 900px;
            height: 540px;
            position: absolute;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="artwork">
            <div class="mirror"></div>
            <img src="./img/homepage-day-date-40-m228238-0042-posterframe.jpg" alt="">
        </div>
        <div class="magnify">
            <img src="./img/homepage-day-date-40-m228238-0042-posterframe.jpg" alt="" class="imgs">
        </div>
    </div>
    <script>
        let mirror = document.querySelector('.mirror');
        let artwork = document.querySelector('.artwork');
        let magnify = document.querySelector('.magnify');
        let imgs = document.querySelector('.imgs');
        // 1. 先给原图框添加鼠标滑动事件，然后获取鼠标在原图框的坐标
        // 2. 因为要求鼠标在放大镜框的中间，所以获取到的鼠标坐标还需要减去放大镜的一半
        // 3. 先最后得到的鼠标坐标值赋值给放大镜框移动距离
        // 4. 最后通过移动同比例的大图片实现效果

        // 前序：
        // 鼠标移入显示遮罩层
        artwork.addEventListener("mouseover", function() {
            mirror.style.display = "block";
            magnify.style.display = "block";
        });
        // 鼠标移出隐藏
        artwork.addEventListener('mouseout', function() {
            mirror.style.display = "none";
            magnify.style.display = "none";
        });

        artwork.addEventListener('mousemove', function(e) {
            // 获取鼠标的坐标
            let mousenumX = e.pageX;
            let mousenumY = e.pageY;
            // 先用获取到的鼠标值减去原图框距离页面左边和上边的距离，
            // 然后再得到的值减去放大镜的宽高一半
            let mirrorX = mousenumX - artwork.offsetLeft - (mirror.offsetWidth / 2);
            let mirrorY = mousenumY - artwork.offsetTop - (mirror.offsetHeight / 2);
            // 设置边界让放大镜不会跑出原图框
            if (mirrorX <= 0) {
                mirrorX = 0;
            } else if (mirrorX >= artwork.offsetWidth - mirror.offsetWidth) {
                mirrorX = artwork.offsetWidth - mirror.offsetWidth;
            }
            if (mirrorY <= 0) {
                mirrorY = 0;
            } else if (mirrorY >= artwork.offsetHeight - mirror.offsetHeight) {
                mirrorY = artwork.offsetHeight - mirror.offsetHeight;
            }
            // 将减后的值赋值给放大镜的移动距离, 记得加px
            mirror.style.left = mirrorX + "px";
            mirror.style.top = mirrorY + "px";


            // 为了让右边的大图的移动比例和放大镜一样，
            // 由公式：放大镜移动距离 / 放大镜最大移动距离 = 大图片移动距离 / 大图片最大移动距离
            // 现在要求：大图片移动距离 = （放大镜移动距离 * 大图片的最大移动距离）/ 放大镜最大移动距离
            // 因为大图片的移动是和放大镜是相反的，所以是负数
            imgs.style.left = -(mirrorX * (imgs.offsetWidth - magnify.offsetWidth)) / (this.offsetWidth - mirror.offsetWidth) + "px";
            imgs.style.top = -(mirrorY * (imgs.offsetHeight - magnify.offsetHeight)) / (this.offsetHeight - mirror.offsetHeight) + "px";

            console.log(mirrorX, mirrorY);
        });
    </script>
</body>
</html>